<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>抽奖</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#main {
				display: flex;

			}

			#d1 {
				position: relative;
				width: 200px;
				height: 500px;
				border: 1px solid red;
				margin-left: 0;
			}

			#d2 {
				position: relative;
				width: 200px;
				height: 500px;
				border: 1px solid red;
				margin-right: 0;
			}

			#d1 #btn {
				height: 40px;
				width: 100px;
				margin-top: 350px;
				margin-left: 50px;
			}

			#d1 #txt1 {
				position: absolute;
				border: 2px solid gray;
				height: 20px;
				width: 140px;
				margin: 150px 30px;
			}
		</style>
		<script>
			var names= ["朱学峰", "陈家祥", "陈文杰", "陈逸", "翟昆","丁辰浩","丁韩伟"];
			var timer = setInterval(function() {
				var index = Math.floor(Math.random() * names.length + 0);
				document.getElementById("txt1").value = names[index];
			}, 10);

			function getone() {
				var btn = document.getElementById("btn");
				if (btn.value == "确定") {
					clearInterval(timer);
					var txt1 = document.getElementById("txt1");
					var ul1 = document.getElementById("ul1");
					var name = txt1.value;
					var li = document.createElement("li");
					li.innerHTML = name;
					ul1.appendChild(li);
					var index=names.indexOf(name);
					names.splice(index, 1);
					if(names.length==0){
						for(let i=0;i<ul1.childNodes.length;i++){
							names.unshift(ul1.childNodes[i].innerHTML);
						}
					}
					
					btn.value = "开始";
					
				}
				else {
					timer = setInterval(function() {
						var index = Math.floor(Math.random() * names.length + 0);
						document.getElementById("txt1").value = names[index];
					}, 10);
					btn.value = "确定";
				}
			}
		</script>
	</head>
	<body>
		<div id="main">
			<div id="d1">
				<input type="text" id="txt1" value=" " />
				<input type="button" id="btn" value="确定" onclick="getone()" />
			</div>
			<div id="d2">
				<ul id="ul1" type="none">
				</ul>
			</div>
		</div>
	</body>
</html>
